import React from 'react';
import { ErrorWrap } from './StyleError.js'
import img from '../../assets/images/scenery.jpg';

class Page500 extends React.Component {
    state = {
        animated: '',
    };
    enter = () => {
        this.setState({ animated: 'animate__heartBeat' });
    };
    out = () => {
        this.setState({ animated: '' });
    }
    render() {
        return (
            <ErrorWrap>
                <div className="error-page">
                    <img
                        src={img}
                        alt="500"
                    />
                    <div className="error-p">
                        <h2 
                            className={`animate__animated animate__swing ${this.state.animated}`}
                            onMouseEnter={this.enter}
                            onMouseOut={this.out}
                        >500</h2>
                        <p>服务器好像出错了...
                            您可以<a href="/">返回主页</a>看看</p>
                    </div>
                </div>
            </ErrorWrap>
        );
    }
}

export default Page500;
